<template>
  <div class="m-leadsInfo-lead">
    <div class="m-searchPanel m-searchPanelA" v-if="isEdit">
      <div class="layout-2">
        <el-form :model="searchForm.form" :inline="true" :rules="searchForm.rules" ref="refSearchForm">
          <el-row :gutter="30">
            <el-col :span="6">
              <el-form-item label="手机号" prop="phone">
                <el-input v-model.number="searchForm.form.phone" placeholder=" " clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-button icon="el-icon-search" @click="submit" type="primary">关联</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="m-dataList">
      <el-table
        :data="dataList"
        style="width: 100%"
        v-loading="dataListLoading"
        element-loading-text="loading..."
        max-height="600"
        @sort-change="tableSortBy"
      >
        <el-table-column
          label="我关注的"
          prop="focus"
          :filters="[{ text: '已关注', value: '2' }, { text: '未关注', value: '1' }]"
          :filter-method="filterTag"
          filter-placement="bottom-start"
          width="120">
          <template slot-scope="scope">
            <i @click="activeFocus(scope.row)" :class="{
                  'el-icon-star-off':scope.row.focus == '1',
                  'el-icon-star-on':scope.row.focus == '2'
                }"></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="project"
          label="项目">
          <template slot-scope="scope">
            <Comp-project-icons :project="scope.row.project"></Comp-project-icons>
          </template>
        </el-table-column>
        <el-table-column
          prop="realName"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="otherPhone"
          label="其他手机号"
          width="120">
        </el-table-column>
        <el-table-column
          label="LEAD状态"
          width="100">
          <template slot-scope="scope">
            <span>{{scope.row.hstatus | hstatusLeadToString}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="astatus"
          label="分配状态"
          width="80">
          <template slot-scope="scope">
            <span>{{scope.row.astatus | astatusToString}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="assigner"
          label="分配给"
          width="120">
        </el-table-column>
        <el-table-column
          prop="assignTimeStr"
          sortable="custom"
          label="分配时间"
          width="160">
        </el-table-column>
        <el-table-column
          prop="createUser"
          label="创建人"
          width="120">
        </el-table-column>
        <el-table-column
          prop="createTimeStr"
          label="创建时间"
          sortable="custom"
          width="160">
        </el-table-column>
        <el-table-column
          prop="labels"
          label="标记"
          width="200">
          <template slot-scope="scope">
            <Comp-tags :label="scope.row.labels"></Comp-tags>
          </template>
        </el-table-column>
        <el-table-column
          v-if="isEdit"
          label="操作"
          fixed="right"
          width="110">
          <template slot-scope="scope">
            <el-button size="small" @click="unToLead(scope.row)">取消关联</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import * as LeadsAPI from '@/Api/lead';
  import * as FocusAPI from '@/Api/focus'
  export default {
    name: 'TheLeadCommonLead',
    data () {
      return {
        dataList: [],
        searchForm: {
          form: {
            phone: ''
          },
          rules: {
            phone: [
              {required: true, message: '请输入手机号', trigger: 'blur'},
              {type: 'number', trigger: 'blur', message: '手机号格式错误'}
            ]
          }
        },
        dataListLoading: false,
        sortInfo: {},
      }
    },
    computed: {
      isEdit(){
        if (this.$route.query.type && this.$route.query.type == 'edit') {
          return true;
        } else {
          return false;
        }
      }
    },
    methods: {
      tableRenderHeader(h, {column}) {
        return h('i', {
          class: ['el-icon-star-off', 'el-icon-star-off-header']
        });
      },
      filterTag(value, row) {
        return row.focus === value;
      },
      activeFocus(data) {
        FocusAPI[data.focus == '1' ? 'toFocus' : 'unFocus']({
          id: data.id,
          type: '2'
        })
          .then(res => {
            if (res.code != 0) {
              this.$notify.warning({
                title: '温馨提示',
                message: res.msg
              })
              return;
            }
            this.$message({
              message: data.focus == '1' ? '关注成功' : '取消关注成功',
              type: 'success'
            });
            if (data.focus == '1') {
              data.focus = '2';
            } else if (data.focus == '2') {
              data.focus = '1';
            }
          })
          .catch(error => {
            console.log(error)
          })
      },
      unToLead(row) {
        this.$confirm('确定取消关联吗?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.queryInfo();
          LeadsAPI.leadUntoLead({
            oid: row.id,
            id: this.$route.params.id.split('_')[0],
            ophone: row.phone,
            mainPhone:this.$route.params.id.split('_')[1],
          })
            .then(res => {
              if (res.code != 0) {
                this.$notify.warning({
                  title: '温馨提示',
                  message: res.msg
                })
                return;
              }
              this.queryInfo();
              this.$message({
                type: 'success',
                message: '取消成功!'
              });
            })
            .catch(error => {
              console.log(error)
            })

        });
      },
      submit(){
        this.$refs.refSearchForm.validate(flg => {
          if (!flg) {
            return;
          }
          LeadsAPI.leadLeadLead({
            id: this.$route.params.id.split('_')[0],
            phone: this.searchForm.form.phone,
            mainPhone:this.$route.params.id.split('_')[1]
          })
            .then(res => {
              if (res.code != 0) {
                this.$notify.warning({
                  title: '温馨提示',
                  message: res.msg
                })
                return;
              }
              this.queryInfo();
              this.$message({
                message: '关联成功',
                type: 'success'
              });
              this.searchForm.form.phone = '';
            })
            .catch(error => {
              console.log(error)
            })
        })
      },
      tableSortBy(data) {
        if (!data.order) {
          return;
        }
        this.sortInfo.orderParam = data.prop;
        this.sortInfo.orderType = data.order.substr(0, data.order.length - 6);
        this.queryInfo();
      },
      queryInfo(){
        this.dataListLoading = true;
        LeadsAPI.leadLeadLinkLead(Object.assign({
          id: this.$route.params.id.split("_")[0],
        }, this.sortInfo))
          .then(res => {
            this.dataListLoading = false;
            if (res.code != 0) {
              this.$notify.warning({
                title: '温馨提示',
                message: res.msg
              })
              return;
            }
            this.dataList = res.data;
          })
          .catch(error => {
            this.dataListLoading = false;
            console.log(error)
          })
      }
    },
    created(){
      this.queryInfo()
    }
  }
</script>

<style scoped lang="scss">
  .m-leadsInfo-lead {
    padding-top: 24px;
  }
</style>
